<template>
    <view class="search-box">
    <uni-search-bar @input="input" :focus="true" :radius="100" cancelButton="none" bgColor="#c00000"></uni-search-bar>
    </view>
    
    <!-- 搜索建议列表 -->
    <view class="sugg-list" v-if="searchList.length !== 0">
        <view class="sugg-item" v-for="(item,i) in searchList" :key="i" @click="gotoDetail(item)">
            <view class="good-name">{{item.goods_name}}</view>
            <uni-icons type="right" size="16"></uni-icons>
        </view>
    </view>
    
    <!-- 搜索历史 -->
    <view class="history-box" v-else>
        <!-- 标题区域 -->
        <view class="history-title">
            <text>搜索历史</text>
            <uni-icons type="trash" size="25" @click="clean"></uni-icons>
        </view>
        <!-- 列表区域 -->
         <view class="history-list">
             <uni-tag inverted="true" :text="item" v-for="(item,i) in historyLists" :key="i" @click="gotoGoodsList"></uni-tag>
         </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                timer:null,
                keyCode:'',
                searchList:[],
                // 搜索历史的数组
                historyList:['a','app','apple']
            };
        },
        onLoad() {
            // 页面加载时从本地存储读取历史记录
            this.loadHistory();
        },
        methods:{
            // input输入事件的处理函数
            input(e){
                // 节流处理，500毫秒内只执行一次
            clearTimeout(this.timer)
               this.timer = setTimeout(()=>{
                    this.keyCode = typeof e === 'object' && e.value !== undefined ? e.value : e
                    this.getSearchList()
                },500)
            },
            // 搜索建议列表的获取函数
           async getSearchList(){
               try {
                   // 正确检查输入是否为空
                   if(!this.keyCode || this.keyCode.trim() === '') {
                       this.searchList=[]
                       return
                   }
                   const {data:res} = await uni.$http.get('/api/public/v1/goods/qsearch',{query:this.keyCode})
                   // 检查响应状态码是否为200
                   if(res.meta && res.meta.status !== 200) {
                       return uni.$showMsg()
                   } 
                   // 设置搜索建议
                   this.searchList = res.message || []
                   // 添加无搜索结果的提示
                   if (this.searchList.length === 0) {
                       uni.$showMsg('暂无搜索结果')
                    //没有搜索结果就返回，不继续执行
                     return
                   }
                   this.getHistoryList()
               } catch (error) {
                   console.error('搜索请求异常:', error)
                   uni.$showMsg('搜索失败')
               }
            },
            gotoDetail(item){
               uni.navigateTo({
                   url:'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
               })
            },
            // 搜索历史的处理函数
            getHistoryList(){
                // 只有当keyCode不为空时才添加到历史记录
                if(this.keyCode && this.keyCode.trim() !== '') {
                    // 先检查是否已经存在该关键词，如果存在则移除
                    const index = this.historyList.indexOf(this.keyCode);
                    if (index > -1) {
                        this.historyList.splice(index, 1);
                    }
                    // 将新搜索的关键词添加到数组开头
                    this.historyList.unshift(this.keyCode);
                    // 限制历史记录数量
                    if (this.historyList.length > 10) {
                        this.historyList = this.historyList.slice(0, 10);
                    }
                    // 保存到本地存储
                    this.saveHistory();
                }
            },
            // 从本地存储读取历史记录
            loadHistory() {
                try {
                 
                    // 读取本地存储中的搜索历史
                    const history = uni.getStorageSync('searchHistory');
                    if (history) {
                        this.historyList = JSON.parse(history);
                    } else {
                        // 如果本地没有记录，使用默认值
                        this.historyList = ['a','app','apple'];
                        this.saveHistory();
                    }
                } catch (error) {
                    console.error('读取历史记录失败:', error);
                    // 出错时使用默认值
                    this.historyList = ['a','app','apple'];
                }
            },
            // 保存历史记录到本地存储
            saveHistory() {
                try {
                    uni.setStorageSync('searchHistory', JSON.stringify(this.historyList));
                } catch (error) {
                    console.error('保存历史记录失败:', error);
                    // uni.$showMsg('保存历史记录失败')
                }
            },
            clean(){
                uni.showModal({
                    title:'确认清除搜索历史吗？',
                    success:(res)=>{
                        if(res.confirm){
                            this.historyList = []
                            this.saveHistory()
                        }
                    }
                })
            },
            gotoGoodsList(keyCode){
                uni.navigateTo({
                    url:'/subpkg/goods_list/goods_list?query='+keyCode
                })
            }
        },
        computed:{
            // 搜索历史的处理函数
            historyLists(){
                // 由于我们已经在添加时处理了重复和顺序，这里只需要返回数组即可
                return this.historyList.slice(0, 10);
            }
        }
    }
</script>

<style lang="scss">
.search-box{
    position: sticky;
    top: 0;
    z-index: 999;
}
.sugg-list{
    padding: 0 5px;
   .sugg-item{
       display: flex;
       align-items: center;
       justify-content: space-between;
       font-size: 12px;
       padding: 13px 0;
       border-bottom: 1px solid #efefef;
       .good-name{
           // 溢出加省略号
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }
   } 
}
.history-box{
     padding: 0 5px;
     .history-title{
         display: flex;
         justify-content: space-between;
         align-items: center;
         height: 40px;
         font-size: 13px;
         border-bottom: 1px solid #efefef;
     }
     .history-list{
         display: flex;
         flex-wrap: wrap;
         margin-top: 10px;
         
         .uni-tag {
             margin-top: 5px;
             margin-right: 5px;
         }
     }
 }

</style>
